<template>
	<view class="balance">
		<view class="balance-top">
			<u-navbar title="账单明细" :background="background" title-color="#fff" back-icon-color="#fff"></u-navbar>
			<view class="balance-conditions">
				<view class="balance-conditions-tab  btn btn-size" @click="dataTimeShow = true">
					<!-- <text ref="balanceData">{{dataTime}}</text> -->
					{{ dataTime }}
					<text class="iconfont iconxiangxia balance-xia"></text>
				</view>
				<view class="balance-conditions-tab balance-conditions-tab-border" @click="typeshow = true">
					{{ rechargeType }}
					<text class="iconfont iconxiala1"></text>
				</view>
			</view>
		</view>

		<view class="balance-con">
			<view class="balance-time-picker">
				<view class="time-picker-right">
					<view class=""> <text>充值</text>
						<view>￥{{ SR }}</view>
					</view>
					<view class=""> <text>收益</text>
						<view>￥{{ SY }}</view>
					</view>
					<view class=""> <text>支出</text>
						<view>￥{{ ZC }}</view>
					</view>
				</view>
			</view>
			<view class="tab" v-if="balanceList.length != 0">
				<view class="recharge" v-for="(item, index) of balanceList" :key="index" @click="toDeatils(item)">
					<view class="recharge-left">
						<view class="charge dai" v-if="item.ORMTB420CB01 && item.ORMTB420CB01 == '代他人充值'">代</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '充值' && item.ORMTB420CB01 !== '代他人充值' ">
							<image :src="getStaticFilePath('/accountBalance/cong.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '油卡'">
							<image :src="getStaticFilePath('/accountBalance/xiao.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '扣款'">
							<image :src="getStaticFilePath('/accountBalance/xiao.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '运费运单扣款'">
							<image :src="getStaticFilePath('/accountBalance/xiao.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '红冲'">
							<image :src="getStaticFilePath('/accountBalance/hongc.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '退款'">
							<image :src="getStaticFilePath('/accountBalance/tuikuan.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '提现'">
							<image :src="getStaticFilePath('/accountBalance/tixian.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '运费'">
							<image :src="getStaticFilePath('/accountBalance/cong.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '运单补偿'">
							<image :src="getStaticFilePath('/accountBalance/cong.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '取消扣款'">
							<image :src="getStaticFilePath('/accountBalance/xiao.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '抽奖收益'">
							<image :src="getStaticFilePath('/accountBalance/shour.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '拉新收益'">
							<image :src="getStaticFilePath('/accountBalance/shour.png')" mode=""></image>
						</view>
						<view class="charge" v-if="item.ORMTB420CA00 == '补款'">
							<image :src="getStaticFilePath('/accountBalance/xiao.png')" mode=""></image>
						</view>
					</view>
					<view class="recharge-right">
						<view class="recharge-font">
							<text class="recharge-font-zi">{{ item.ORMTB420CB01 === '代他人充值' ? '代充' : item.ORMTB420CA00 }}</text>
							<!-- CZ充值 KK扣款， HC红冲，TK退款-->
							<text class="recharge-font-data" v-if="item.ORMTB420CA00 == 'kk'">{{ item.ORMTB440CA05
								}}</text>
							<text class="recharge-font-data recharge-font-dataName">{{ item.ORMTB420CA07 }}</text>
						</view>
						<view class="recharge-doll">
							<text class="">
								{{ item.ORMTB420CA00 == '充值' ? '+' : item.ORMTB420CA00 == '提现' ? '-' : item.ORMTB420CA00
									== '油卡' ? '-' : item.ORMTB420CA00 == '红冲' ? '-' : item.ORMTB420CA00 == '运费' ? '+' :
										item.ORMTB420CA00 == '运单补偿' ? '+' : item.ORMTB420CA00 == '拉新收益' ? '+' :
											item.ORMTB420CA00 == '补款' ? '' : item.ORMTB420CA00 == '抽奖收益' ? '+' : item.ORMTB420CA00
												== '运费运单扣款' ? '-' : item.ORMTB420CA00 == '取消扣款' ? '-' : item.ORMTB420CA00 == '扣款' ? '-'
								: '+' }}{{ item.ORMTB420CA02 }}
								<text class="iconfont iconarrow_right"></text>
							</text>
							<text class="recharge-doll-yuFont" v-if="item.ORMTB420CB01 !== '代他人充值'">余额： {{ item.ORMTB420CA04 }}元</text>
						</view>
						<view class="recharge-line"></view>
					</view>
				</view>
				<view class="sendorder-loadmore">
					<u-loadmore v-if="balanceList.length != 0" :status="status" :icon-type="iconType"
						:load-text="loadText" />
				</view>
				<view class="balanceWSJ" v-if="balanceList.length == 0">
					<image :src="getStaticFilePath('/QXY/noData.png')"></image>
				</view>
			</view>
		</view>
		<u-picker v-model="dataTimeShow" mode="time" :params="params" @confirm="dateStartConfirm"></u-picker>
		<u-select v-model="typeshow" :default-value="typeIndex" :list="typeList" @confirm="typeOnConfirm">
		</u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: '#00a1f1',
			},
			userinfo: JSON.parse(uni.getStorageSync('userinfo')),
			status: 'loading',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
			},
			countpage: 1,
			page: 1,
			balanceList: [],
			index: 0,
			kap: 0,
			CZ: '',
			dataTimeShow: false,
			dataTime: this.dateTransfor(new Date(), "yyyy-MM"),
			params: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
			zxf: '', //总消费
			zcz: '', //总充值
			SR: 0, //收入
			ZC: 0, //支出
			SY: 0,
			rechargeType: '全部类型', //充值类型
			typeshow: false,
			typeList: [{
				value: '',
				label: '全部'
			}, {
				value: 'CZ',
				label: '充值'
			}, {
				value: 'TK',
				label: '退款'
			}, {
				value: 'HC',
				label: '红冲'
			}, {
				value: 'KK',
				label: '扣款'
			},
			{
				value: 'YK',
				label: '油卡'
			},
			{
				value: 'SR',
				label: '运费'
			},
			{
				value: 'YDKK',
				label: '运费运单扣款'
			},
			{
				value: 'QX',
				label: '运单补偿'
			},
			{
				value: 'CJSY',
				label: '抽奖收益'
			},
			{
				value: 'LXSY',
				label: '拉新收益'
			},
			{
				value: 'KKXG',
				label: '补款'
			}
			],

			infoType: '',
			typeIndex: [0],

		}
	},
	onShow() {

		this.queryData()
	},
	onReachBottom() {
		if (this.page == this.countpage) {
			return this.status = "nomore"
		}
		this.page++
		this.queryData()
	},
	methods: {
		typeOnConfirm(e) {
			if (e[0].label == '全部类型') {
				this.infoType = ''
			} else {
				this.typeIndex = [(this.typeList || []).findIndex((profile) => profile.value === e[0].value)]
				this.infoType = e[0].value
			}
			this.rechargeType = e[0].label
			this.balanceList = []
			this.page = 1
			this.countpage = 1
			this.queryData();
			this.typehow = false;
		},
		dateStartConfirm(e) {
			this.dataTime = e.year + '-' + e.month
			this.balanceList = []
			this.page = 1
			this.countpage = 1
			this.queryData()
		},
		dateTransfor(date, format) {
			var o = {
				"M+": date.getMonth() + 1,
				"d+": date.getDate(),
				"h+": date.getHours(),
				"m+": date.getMinutes(),
				"s+": date.getSeconds(),
				"q+": Math.floor((date.getMonth() + 3) / 3),
				"S": date.getMilliseconds()
			};
			if (/(y+)/.test(format)) {
				format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
			}
			for (let k in o) {
				if (new RegExp("(" + k + ")").test(format)) {
					format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" +
						o[k]).length)));
				}
			}
			return format;
		},
		toDeatils(item) {
			// console.log(item)
			uni.navigateTo({
				url: '../accpaymentDetails/index' + `?TYPE=${item.ORMTB420CA002}&ORMTB420ID=${item.ORMTB420ID}`
			})
		},
		queryData() {
			uni.showLoading({
				title: '请求中...',
				mask: true
			});
			this.status = "loading"
			uni.request({
				url: this.baseUrl + '/orm/ormtb420/selectOrmtb420List',
				method: 'POST',
				dataType: 'json',
				data: {
					time: this.dataTime, //时间
					ORMTB400ID: this.userinfo.ORMTB400ID, //大客户ID
					ORMTB410ID: this.userinfo.ORMTB410ID, //二级级客户ID
					ORMTB420CA00: this.infoType, //变动类型CZ充值TX提现TK退款HC红冲KK扣款
					page: this.page,
					limit: 10
				},
				success: (res) => {
					uni.hideLoading();
					// console.log(res);
					if (res.data.code == 200) {
						if (!res.data.data || res.data.data == null) {
							this.balanceList = []
							this.page = 1
							this.countpage = 1
							return
						}
						var data = res.data.data.list || []
						if (this.page > 1) {
							this.balanceList = [...this.balanceList, ...data]
							// console.log(this.balanceList)
						} else {
							this.balanceList = data

						}
						this.countpage = Math.ceil(res.data.count / 10)
						if (res.data.data != null) {
							if (res.data.data['sumMoneyCz'] != undefined) {
								this.SR = res.data.data['sumMoneyCz'];
							} else {
								this.SR = 0;
							}
							if (res.data.data['sumMoneyZc'] != undefined) {
								this.ZC = res.data.data['sumMoneyZc'];
							} else {
								this.ZC = 0;
							}
							if (res.data.data['sumMoneySy'] != undefined) {
								this.SY = res.data.data['sumMoneySy'];
							} else {
								this.SY = 0;
							}

						} else {
							this.SR = 0;
							this.ZC = 0;
							this.SY = 0;
						}
					} else {
						this.balanceList = []
						this.page = 1
						this.countpage = 1
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
					if (this.countpage == this.page) {
						this.status = "nomore"
					} else {
						this.status = "loadmore"
					}
				},
				fail: (res) => {
					if (this.countpage == this.page) {
						this.status = "nomore"
					} else {
						this.status = "loadmore"
					}
					uni.hideLoading();
					uni.showToast({
						title: res.data.message,
						duration: 5000,
						icon: 'none',
					});
				}
			});
		},
	}
}
</script>

<style scoped>
.sendorder-loadmore {
	/* background-color: #e3e3e3; */
	padding: 20rpx 0 20rpx 0;
}

.balance-conditions {
	display: flex;
	background-color: #FFF;
	color: #333;
	font-size: 30rpx;
	line-height: 44rpx;
	padding: 15rpx 21rpx;
	height: 84rpx;
	overflow: hidden;
	border-bottom: 12rpx solid rgba(242, 242, 242, 1);
}

.balance-conditions-tab {
	flex: 1;
	text-align: center;
	font-size: 40rpx;
	font-weight: 500;
	overflow: hidden;
	position: relative;
	padding-right: 36rpx;
	color: #333;
}

.balance-conditions-tab-border {
	border-left: 4rpx solid #f2f2f2;
}

.balance-conditions-tab+.balance-conditions-tab {
	margin-left: 22rpx;
}

.balance-conditions-tab text {
	position: absolute;
	right: 0;
}

.balance-conditions-tab .iconfont {
	font-size: 30rpx;
	color: #99989b;
	margin-left: 7rpx;
}

.balance {
	/* background: rgba(242, 242, 242, 0.95); */
}

/*如果用户没有订单--内容最外层父元素加上class*/
.balanceWSJ {
	padding-top: 200rpx;
}

.balanceWSJ image {
	display: block;
	margin: 0 auto;
	height: 360rpx;
	width: 43%;
}

/* */
.chargeColorYellow {
	/* 红冲 */
	/* background: url(../../../../../../static/image/hongc.png); */

}

.chargeColorRed {
	/* background: url(../../../../../../static/image/xiao.png); */
	/* 消费 */
}

.chargeColorBlue {
	/* 充值 */
	/* background: url(../../../../../../static/image/cong.png); */

}

.chargeColorPblue {
	/* 退款 */
	/* background: url(../../../../../../static/image/tuikuan.png); */
}

/*当月无数据时显示--缺醒页 */
.balanceQXY {
	display: none !important;
}



.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	zoom: 1;
}

/**/

.balance .link {
	color: rgba(153, 153, 153, 1);
}

.balance-top {
	position: fixed;
	width: 100%;
	z-index: 11;
}



/**/

.balance .tab {
	padding: 0;
	margin: 0;
	width: 100%;
	/*height: rem;*/
	/* min-height: 13.3rem; */
	background: rgba(255, 255, 255, 1);
}

.balance .tab-tap {
	width: 100%;
	height: 72rpx;
	display: flex;
	flex-direction: row;
}

.balance .tab-tap .tab-list {
	font-size: 28rpx;
	text-align: center;
	line-height: 86rpx;
	width: 33%;
	height: 86rpx;
	border-bottom: 4rpx solid rgba(255, 255, 255, 1);
}

.balance .borCol {
	border-bottom: 4rpx solid rgba(0, 161, 241, 1) !important;
}

/**/

.balance .cont {
	margin-top: 15rpx;
}

.balance .recharge {
	width: 100%;
	display: flex;
	flex-direction: row;
	padding: 15rpx 0;
}

.balance .recharge-left {
	margin-right: 22rpx;
	text-align: center;
	margin-top: 18rpx;
}

.balance .charge {
	width: 54rpx;
	margin-left: 24rpx;
	height: 54rpx;
	line-height: 56rpx;
	background-size: cover;
	border-radius: 50%;
	font-size: 32rpx;
}

.balance .dai {
	background: rgb(97, 97, 169);
	color: #fff;
}

.balance .charge image {
	width: 100%;
	height: 100%;
}

.balance .recharge-right {
	width: 85%;
	/* width: 95%; */
	/* height: 1.11rem; */
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-top: 18rpx;
	padding-right: 20rpx;
	/* padding-right: 0.5rem; */
}

.balance .recharge-line {
	height: 2rpx;
	background: rgba(153, 153, 153, 0.3);
	/* width: 93%; */
	width: 96%;
	position: absolute;
	/* bottom: -0.2rem; */
	bottom: 0;
	left: 0;
}

.balance .recharge-font {
	width: 50%;
	/* height: 1.25rem; */
}

.balance .recharge-font-zi {
	/* font-size: 32rpx; */
	font-weight: 400;
	/* height: 32rpx; */
	/* line-height: 36rpx; */
	color: rgba(51, 51, 51, 1);
	display: block;
}

.balance .recharge-font-data {
	font-size: 30rpx;
	/* height: 0.35rem;/ */
	line-height: 64rpx;
	display: block;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
}

.balance .recharge-doll {
	/* font-size: 32rpx; */
	/* line-height: 43rpx; */
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	display: flex;
	flex-direction: column;
}

.recharge-doll text {
	text-align: right;
}

.recharge-doll text:first-child {
	color: rgba(51, 51, 51, 1);
	/* font-size: 32rpx; */
}

.recharge-doll text:first-child text {
	font-size: 35rpx;
}

.recharge-doll text:last-child {
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
}


.balance .balance-time-picker {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 29rpx;
	/* font-size: 32rpx; */
	background: rgba(242, 242, 242, 1);
}

.time-picker-left {
	line-height: 100rpx;
	color: rgba(51, 51, 51, 1);
}


/* 向下--图标 */
.balance-xia {
	position: relative;
	top: 6rpx;
}

.time-picker-left .down {
	margin-top: 7rpx;
}

.time-picker-right {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	color: rgba(102, 102, 102, 1);
}

.balance-con {
	position: absolute;
	top: 0;
	margin-top: 207rpx;
	margin-top: 240rpx;
	width: 100%;
}

.balance-Aufladung {
	width: 100%;
	background: rgba(255, 255, 255, 1) !important;
	padding: 15rpx 29rpx;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	color: rgba(102, 102, 102, 1);
}

.recharge-doll-yuFont {
	font-size: 32rpx !important;
	color: rgba(153, 153, 153, 1);
	line-height: 65rpx;
	display: inline-block;
}

.recharge-font-dataName {
	/* margin-bottom: 18rpx; */
}
</style>
